Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক, যা বিভিন্ন লেআউট তৈরির জন্য সরল ও কার্যকরী টুলস প্রদান করে। Flexbox এবং Grid হল দুটি শক্তিশালী CSS লেআউট মডেল, যা Pure.CSS-এর মধ্যে ব্যবহার করা যেতে পারে এবং এটি ওয়েব পেজের লেআউটগুলিকে আরও রেসপন্সিভ এবং উপযুক্ত করে তোলে।
1. Flexbox Layout in Pure.CSS
Flexbox (Flexible Box Layout) হল একটি CSS লেআউট মডেল যা উপাদানগুলির মধ্যে স্থান ভাগাভাগি এবং তাদের সঠিকভাবে সজ্জিত করতে সহায়ক। Flexbox এর সাহায্যে আপনি খুব সহজেই ওয়েব পেজের কন্টেন্টের স্থান সংরক্ষণ, এ্যালাইনমেন্ট এবং বিন্যাস করতে পারেন। Pure.CSS এ Flexbox ব্যবহারের জন্য কোনও অতিরিক্ত ফ্রেমওয়ার্ক সেটআপ প্রয়োজন হয় না, কারণ এটি CSS এর মৌলিক অংশ হিসেবে সহজেই ব্যবহৃত হয়।
Flexbox Layout উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Flexbox Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Flexbox container */
.flex-container {
display: flex;
justify-content: space-between; /* Distribute items with space between */
align-items: center; /* Align items vertically in the center */
padding: 10px;
background-color: #f4f4f4;
}
/* Flex items */
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: flex: কন্টেইনারে Flexbox সক্রিয় করতে ব্যবহার করা হয়।justify-content: space-between: উপাদানগুলির মধ্যে গ্যাপ তৈরি করতে ব্যবহৃত হয়। এটি এক্স-অ্যাক্সিসে উপাদানগুলিকে সমানভাবে ছড়িয়ে দেয়।align-items: center: উপাদানগুলিকে Y-অ্যাক্সিসে কেন্দ্রীয়ভাবে সজ্জিত করার জন্য ব্যবহৃত হয়।flex: 1: প্রতিটি উপাদান সমানভাবে প্রস্থ গ্রহণ করবে।
2. Grid Layout in Pure.CSS
Grid Layout হল একটি CSS লেআউট মডেল, যা ওয়েব পেজের কন্টেন্টকে সারি এবং কলামে সাজানোর জন্য ব্যবহৃত হয়। Grid এর সাহায্যে আপনি ওয়েব ডিজাইনে অনেক বেশি নিয়ন্ত্রণ পাবেন এবং এটি রেসপন্সিভ লেআউট তৈরি করতে সহায়ক।
Grid Layout উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
gap: 10px; /* Space between grid items */
}
/* Grid items */
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: grid: কন্টেইনারে গ্রিড লেআউট সক্রিয় করতে ব্যবহার করা হয়।grid-template-columns: repeat(3, 1fr): তিনটি সমান কলাম তৈরি করতে ব্যবহৃত হয়, যেখানে1frমানে প্রতিটি কলাম সমান আকারে থাকবে।gap: 10px: গ্রিড আইটেমগুলির মধ্যে 10px গ্যাপ তৈরি করতে ব্যবহৃত হয়।
3. Grid Optimization in Pure.CSS
Grid লেআউট ব্যবহার করা হয় বিশেষত যখন আপনাকে একটি কন্টেইনারে একাধিক উপাদান সাজাতে হয়। Pure.CSS এ Grid লেআউটের জন্য pure-g এবং pure-u-* ক্লাস রয়েছে, যা গ্রিড সিস্টেমকে কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
Grid Optimization উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid Optimization</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pure-g {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
gap: 15px;
}
.pure-u-1-2 {
grid-column: span 2; /* Each item will span 2 columns */
}
.pure-u-1 {
grid-column: span 1; /* Span 1 column */
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 grid-item">Item 1</div>
<div class="pure-u-1 grid-item">Item 2</div>
<div class="pure-u-1-2 grid-item">Item 3</div>
<div class="pure-u-1-2 grid-item">Item 4</div>
<div class="pure-u-1 grid-item">Item 5</div>
<div class="pure-u-1 grid-item">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
grid-template-columns: repeat(4, 1fr): এখানে ৪টি কলাম তৈরি করা হয়েছে।pure-u-1-2: কিছু আইটেমকে ২টি কলামে বিস্তৃত করা হয়েছে (যেমন Item 3 এবং Item 4)।pure-u-1: অন্যান্য আইটেম একক কলামে রাখা হয়েছে।
4. Flexbox এবং Grid এর সংমিশ্রণ
Pure.CSS-এ Flexbox এবং Grid এর সংমিশ্রণ ব্যবহার করে আপনি আরও শক্তিশালী এবং কাস্টমাইজযোগ্য লেআউট তৈরি করতে পারবেন।
উদাহরণ: Flexbox এবং Grid সংমিশ্রণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox and Grid Combination</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.grid-item, .flex-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
</div>
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে একটি Grid কন্টেইনার এবং একটি Flexbox কন্টেইনার তৈরি করা হয়েছে। Flexbox এবং Grid একে অপরের সাথে মিশিয়ে আপনি আরও আরও কাস্টমাইজড এবং রেসপন্সিভ লেআউট তৈরি করতে পারবেন।
Pure.CSS ফ্রেমওয়ার্ক ব্যবহার করে Flexbox এবং Grid লেআউট তৈরি করা সহজ এবং কার্যকর। আপনি এগুলিকে রেসপন্সিভ লেআউট তৈরিতে ব্যবহার করতে পারেন এবং স্ক্রীন সাইজের উপর নির্ভর করে কন্টেন্টের প্রদর্শন পরিবর্তন করতে পারেন। Pure.CSS এর গ্রিড এবং ফ্লেক্স সিস্টেম আপনাকে আপনার ওয়েব ডিজাইনকে আরও সুন্দর এবং কার্যকরী করতে সাহায্য করে।
Read more
